<template>
    <div id="cont4" class="content font-class part">
        <h2>eChart 图表</h2>
    </div>
    <h4>折线图柱状图混合使用</h4>
    <p>这是一款用svg渲染的轻量化图表</p>
    <div class="component_item">
        <div class="p_20">
            <UiEchart :data="barLineData"/>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;template>
        &lt;UiEchart :data="barLineData"/>
    &lt;/template>
    &lt;script setup>
    import {UiEchart} from 'yong-ui'
    let barLineData = {
        type: 'bar',                  // 图表类型 折线图和柱状图可省略
        option: {
            title:    '某品牌一周销量', // 标题
            width:    800,           // 图表宽度 px
            height:   400,            // 图表高度 px
            bottom:   50,             // x轴下边距 px
            left:     40,             // y轴左边距 px
            yScale:   40,             // y轴刻度宽度 px
            barWidth: 30,             // 柱子宽度 px
            data: {
                xValue: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
                serve: [
                    {type: 'bar',  name: '衣服', data: [1001,1230,1032,670,870,1415,1295]},
                    {type: 'bar',  name: '裤子', data: [101,120,132,67,878,141,295]},
                    {type: 'bar',  name: '内裤', data: [100,230,32,70,170,415,1295]},
                    {type: 'line', name: '帽子', data: [1020,1230,1382,970,1170,1415,1095]},
                    {type: 'line', name: '袜子', data: [300,670,302,170,190,315,295]},
                ]
            } // 图表数据
        }
    }
    &lt;/script>
        </pre>
    </div>
         
    <h4>折线图使用</h4>
    <div class="component_item">
        <div class="p_20">
            <UiEchart :data="lineData"/>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;template>
        &lt;UiEchart :data="lineData"/>
    &lt;/template>
    &lt;script setup>
    import {UiEchart} from 'yong-ui'
    let lineData = {
        type: 'line',                  // 图表类型 折线图和柱状图可省略
        option: {
            title:    '三亚旅游订票来源', // 标题
            width:    800,           // 图表宽度
            height:   400,            // 图表高度
            bottom:   50,             // x轴下边距
            left:     40,             // y轴左边距
            yScale:   40,             // y轴刻度宽度
            data: {
                xValue: ['一月','二月','三月','四月','五月','六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                serve: [
                    {
                        type: 'line', 
                        name: '途游', 
                        data: [1001,1230,1032,670,870,1415,1295,1032,670,870,1415,1295]},
                    {
                        type: 'line', 
                        name: '小红书',
                         data: [101,120,132,67,878,100,230,32,70,170,213,141,295]},
                    {
                        type: 'line', 
                        name: '抖音', 
                        data: [100,230,32,70,170,415,1295,870,1415,1295,1032,670,234]},
                    {
                        type: 'line', 
                        name: '高德地图', 
                        data: [1020,1230,1382,970,1170,1415,1095,415,1295,870,170,190,101]},
                    {
                        type: 'line', 
                        name: '其它', 
                        data: [300,670,302,170,190,101,120,132,67,878,234,315,295]},
                ]
            } // 图表数据
        }
    }
    &lt;/script>
        </pre>
    </div>
    <h4>柱状图使用</h4>
    <div class="component_item">
        <div class="p_20">
            <UiEchart :data="barData"/>
        </div>
        <pre class="code top_no_radius" v-pre>
    &lt;template>
        &lt;UiEchart :data="barData"/>
    &lt;/template>
    &lt;script setup>
    import {UiEchart} from 'yong-ui'
    let barData = {
        option: {
            title: '三亚旅游订票来源', // 标题
            data: {
                xValue: ['一月','二月','三月','四月','五月','六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
                serve: [
                    {
                        type: 'bar', 
                        name: '途游', 
                        data: [1301,1230,1032,670,870,1415,1295,1032,670,870,1415,1295]
                    },
                    {
                        type: 'bar', 
                        name: '小红书',
                        data: [131,120,132,67,878,230,32,70,170,213,141,295]
                    },
                    {
                        type: 'bar', 
                        name: '抖音', 
                        data: [100,230,32,70,170,415,870,1415,1295,1032,670,234]
                    },
                    {
                        type: 'bar', 
                        name: '高德地图',
                        data: [1020,1230,1382,970,1170,1095,415,1295,870,170,190,101]
                    },
                    {
                        type: 'bar', 
                        name: '其它', 
                        data: [300,670,302,170,190,101,120,132,67,234,315,295]
                    }
                ]
            }// 图表数据
        }
    }
    &lt;/script>
        </pre>
    </div>
    <h4>饼图使用</h4>
    <div class="component_item">
        <div class="p_20">
            <UiEchart :data="{type: 'pie'}"/>
        </div>
        <p class="code top_no_radius">饼图开发中。。。</p>
    </div>
</template>
<script setup>
import {UiEchart} from 'yong-ui'
let barLineData = {
    type: 'bar', // 图表类型
    option: {
        title: '某品牌一周销量', // 标题
        width: 800, // 图表款
        height: 400, // 图表高度
        bottom: 50, // x轴下边距
        left: 40, // y轴左边距
        yScale: 40, // y轴刻度宽度
        barWidth: 30, // 柱子宽度
        data: {
            xValue: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
            serve: [
                {type: 'bar',  name: '衣服', data: [1001,1230,1032,670,870,1415,1295]},
                {type: 'bar',  name: '裤子', data: [101,120,132,67,878,141,295]},
                {type: 'bar',  name: '内裤', data: [100,230,32,70,170,415,1295]},
                {type: 'line', name: '帽子', data: [1020,1230,1382,970,1170,1415,1095]},
                {type: 'line', name: '袜子', data: [300,670,302,170,190,315,295]},
            ]
        }// 图表数据
    }
}
let lineData = {
    type: 'line', // 图表类型
    option: {
        title: '三亚旅游订票来源', // 标题
        width: 800, // 图表款
        height: 400, // 图表高度
        bottom: 50, // x轴下边距
        left: 40, // y轴左边距
        yScale: 40, // y轴刻度宽度
        data: {
            xValue: ['一月','二月','三月','四月','五月','六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
            serve: [
                {type: 'line', name: '途游', data: [1301,1230,1032,670,870,1415,1295,1032,670,870,1415,1295]},
                {type: 'line', name: '小红书', data: [131,120,132,67,878,230,32,70,170,213,141,295]},
                {type: 'line', name: '抖音', data: [100,230,32,70,170,415,870,1415,1295,1032,670,234]},
                {type: 'line', name: '高德地图', data: [1020,1230,1382,970,1170,1095,415,1295,870,170,190,101]},
                {type: 'line', name: '其它', data: [300,670,302,170,190,101,120,132,67,234,315,295]},
            ]
        }// 图表数据
    }
}
let barData = {
    option: {
        title: '三亚旅游订票来源', // 标题
        data: {
            xValue: ['一月','二月','三月','四月','五月','六月','七月', '八月', '九月', '十月', '十一月', '十二月'],
            serve: [
                {type: 'bar', name: '途游', data: [1301,1230,1032,670,870,1415,1295,1032,670,870,1415,1295]},
                {type: 'bar', name: '小红书', data: [131,120,132,67,878,230,32,70,170,213,141,295]},
                {type: 'bar', name: '抖音', data: [100,230,32,70,170,415,870,1415,1295,1032,670,234]},
                {type: 'bar', name: '高德地图', data: [1020,1230,1382,970,1170,1095,415,1295,870,170,190,101]},
                {type: 'bar', name: '其它', data: [300,670,302,170,190,101,120,132,67,234,315,295]},
            ]
        }// 图表数据
    }
}
</script>
<style scoped>

</style>